<!DOCTYPE html>
<html>
  <head>
    <title>Copo Cheio Beer Delivery</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">
	<link href="css/animate.css" rel="stylesheet">
    <link href="css/copocheio.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  	<header class="navbar navbar-inverse cp-navbar" role="banner">
      <div class="container">
        <div class="navbar-header">
          <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".cp-navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <nav class="collapse navbar-collapse cp-navbar-collapse" role="navigation">
          <ul class="nav navbar-nav navbar-right cp-navbar-collapse-inner">
            <li class="active">
              <a href="#entrar">Entrar</a>
            </li>
            <li>
              <a href="#minhaConta"><span class="glyphicon glyphicon-user"></span> Minha Conta</a>
            </li>
            <li>
              <a href="#depoimentos"><span class="glyphicon glyphicon-comment"></span> Depoimentos</a>
            </li>
            <li>
              <a href="#contato"><span class="glyphicon glyphicon-earphone"></span> Contato</a>
            </li>
            <li>
              <a href="#carrinho"><span class="glyphicon glyphicon-shopping-cart"></span> Meu Carrinho</a>
            </li>
          </ul>
        </nav>
      </div>
    </header>
    	<img src="img/logo.png" class="logo-header text-center"/> <!-- Logo Header -->
    	<div class="row navbar cp-header">
			<div class="col-md-4 col-sm-12 text-center">
				<img src="img/logo.png" class="logo-header-sm"/>
            </div>
            <div class="col-md-12 col-sm-12">            	
            </div>
    </div>   
    <article> 	  
    <div class="container">
        <div class="well well-sm">
            Google Adsense: <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
        </div><!-- Google Adsense large text -->
    	<div class="row">       
            <div class="col-md-8">
            	<div class="well cp-slideshow">
                    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Carousel -->
                      <!-- Indicators -->
                      <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
                      </ol>
                    
                      <!-- Wrapper for slides -->
                      <div class="carousel-inner">
                        <div class="item active">
                          <img src="img/slide-show/slide1.jpg" alt="...">
                          <div class="carousel-caption">
                            ...
                          </div>
                        </div>
                        <div class="item">
                          <img src="img/slide-show/slide2.jpg" alt="...">
                          <div class="carousel-caption">
                            ...
                          </div>
                        </div>
                        <div class="item">
                          <img src="img/slide-show/slide3.jpg" alt="...">
                          <div class="carousel-caption">
                            ...
                          </div>
                        </div>
                        <div class="item">
                          <img src="img/slide-show/slide4.jpg" alt="...">
                          <div class="carousel-caption">
                            ...
                          </div>
                        </div>                                        
                      </div>
                    
                      <!-- Controls -->
                      <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                      </a>
                      <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                      </a>
                    </div>
                </div>    
             </div> <!-- end well -->    
              <div class="col-md-4 text-center">
        	<div class="thumbnail" id="cp-fb">  
				<iframe src="http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/pages/Copocheiocom/453598924728632?fref=ts&amp;send=false&amp;layout=standard&amp;width=430&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=80&amp;appId=116639375105467" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:230px; height:160px;margin-top:20px;" allowtransparency="true"></iframe>
				<div class="well-sm">Google Adsense: <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></div>
              </div>
            </div> <!-- end menu esquerdo -->     
        </div><!-- end slide show -->
    </div>
    <div class="container">        
        <div class="row">
        	<div class="col-xs-12 col-md-3">
            	<div class="thumbnail">
                    <ul class="nav nav-pills nav-stacked">
                        <li class="active"><a href="#"><span class="glyphicon glyphicon-th-large"></span> Produtos</a></li>
                        <li><a href="http://www.jquery2dotnet.com"><span class="fa glyphicon glyphicon-book"></span> Como Funciona</a></li>
                        <li><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-map-marker"></span> Área de Atendimento</a></li>
                         <li><a href="#carrinho"><span class="glyphicon glyphicon-shopping-cart"></span> Meu Carrinho</a></li>
                    </ul>
                </div>                

                <div class="panel-group cp-acordion" id="tel-contato">
                  <div class="panel panel-danger">
                    <div class="panel-heading">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#tel-contato" href="#collapse-tel-contanto"><span class="glyphicon glyphicon-phone-alt"></span> Telefones de Contato
                        </a>
                      </h4>
                    </div>
                    <div id="collapse-tel-contanto" class="panel-collapse collapse in">
                      <div class="panel-body">
                        <p><strong>(085) 85639083</strong></p>
	                    <p><strong>(085) 97328353</strong></p>
                      </div>
                    </div>
                  </div>                  
                </div>  <!-- TELEFONE -->
                                
               <div class="panel-group cp-acordion" id="ho-atend">
                  <div class="panel panel-danger">
                    <div class="panel-heading">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#ho-atend" href="#collapse-ho-contanto">
                          <span class="glyphicon glyphicon glyphicon-time"></span> Horário de Atendimento
                        </a>
                      </h4>
                    </div>
                    <div id="collapse-ho-contanto" class="panel-collapse collapse in">
                      <div class="panel-body">
                        <p>Quarta e Quinta <br/> <strong>20:00hs - 01:00hs</strong></p>
						<p>Sexta e Sábado <br/> <strong>20:00hs - 02:00hs</strong></p>
						<p>Domingo <br/> <strong>10:00hs - 18:00hs</strong></p>                        
                      </div>
                    </div>
                  </div>                  
                </div><!-- Horário de Atendimento --> 
                
                <div class="panel-group cp-acordion" id="outros-serv">
                  <div class="panel panel-danger">
                    <div class="panel-heading">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#outros-serv" href="#collapse-outros-serv">
                          <span class="glyphicon glyphicon-info-sign"></span> Outros Serviços
                        </a>
                      </h4>
                    </div>
                    <div id="collapse-outros-serv" class="panel-collapse collapse in">
                      <div class="panel-body">
                            <p><a href="#" class="cp-btn-custom"><span class="glyphicon glyphicon-cutlery"></span> Churrasqueiro Delivery</a></p>                           							
                           	<p><a href="#" class="cp-btn-custom"><span class="glyphicon glyphicon-thumbs-up"></span> Copo Cheio faz a festa!</a></p>
                      </div>
                    </div>
                  </div>                  
                </div><!-- Outros Serviços -->                             
            </div>
        	<div class="col-xs-12 col-md-9">
                <div class="well well-sm">
	                <strong>Buscar Produtos </strong> <input type="text" class="input-sm cp-btn-search form-control" />
                    <div class="btn-group cp-produtos-controller pull-right">
                        <a href="#" id="list" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-th-list">
                        </span>Lista</a> <a href="#" id="grid" class="btn btn-default btn-sm active"><span
                            class="glyphicon glyphicon-th"></span>Grade</a>
                    </div>
                </div>            
            	        <div id="products" class="row list-group cp-produtos">
                            <div class="item  col-xs-12 col-md-4 col-lg-4 cp-produto">
                                <div class="thumbnail">
                                    <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
                                    <div class="caption">
                                        <h4 class="group inner list-group-item-heading">
                                            <a href="#produto" class="cp-link-pro">Product title</a></h4>
                                        <p class="group inner list-group-item-text">
                                            Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                                            sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                                        <div class="row">
                                            <div class="col-xs-5 col-md-4">
                                                <p class="lead">
                                                    $21.000</p>
                                            </div>
                                            <div class="col-xs-5 col-md-4">
                                                <a class="btn btn-danger" href="http://www.jquery2dotnet.com">Add to cart</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="item  col-xs-12 col-md-4 col-lg-4 cp-produto">
                                <div class="thumbnail">
                                    <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
                                    <div class="caption">
                                        <h4 class="group inner list-group-item-heading">
                                            <a href="#produto" class="cp-link-pro">Product title</a></h4>
                                        <p class="group inner list-group-item-text">
                                            Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                                            sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                                        <div class="row">
                                            <div class="col-xs-5 col-md-4">
                                                <p class="lead">
                                                    $21.000</p>
                                            </div>
                                            <div class="col-xs-5 col-md-4">
                                                <a class="btn btn-danger" href="http://www.jquery2dotnet.com">Add to cart</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="item  col-xs-12 col-md-4 col-lg-4 cp-produto">
                                <div class="thumbnail">
                                    <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
                                    <div class="caption">
                                        <h4 class="group inner list-group-item-heading">
                                            <a href="#produto" class="cp-link-pro">Product title</a></h4>
                                        <p class="group inner list-group-item-text">
                                            Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                                            sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                                        <div class="row">
                                            <div class="col-xs-5 col-md-4">
                                                <p class="lead">
                                                    $21.000</p>
                                            </div>
                                            <div class="col-xs-5 col-md-4">
                                                <a class="btn btn-danger" href="http://www.jquery2dotnet.com">Add to cart</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="item  col-xs-12 col-md-4 col-lg-4 cp-produto">
                                <div class="thumbnail">
                                    <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
                                    <div class="caption">
                                        <h4 class="group inner list-group-item-heading">
                                            <a href="#produto" class="cp-link-pro">Product title</a></h4>
                                        <p class="group inner list-group-item-text">
                                            Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                                            sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                                        <div class="row">
                                            <div class="col-xs-5 col-md-4">
                                                <p class="lead">
                                                    $21.000</p>
                                            </div>
                                            <div class="col-xs-5 col-md-4">
                                                <a class="btn btn-danger" href="http://www.jquery2dotnet.com">Add to cart</a>
                                            </div><!-- end col-xs-5 -->
                                        </div><!-- end row -->
                                    </div><!-- end group inner list -->
                                </div><!-- end caption -->
                            </div><!-- end thumbail -->
                            <div class="item  col-xs-12 col-md-4 col-lg-4 cp-produto">
                                <div class="thumbnail">
                                    <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
                                    <div class="caption">
                                        <h4 class="group inner list-group-item-heading">
                                            <a href="#produto" class="cp-link-pro">Product title</a></h4>
                                        <p class="group inner list-group-item-text">
                                            Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                                            sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                                        <div class="row">
                                            <div class="col-xs-5 col-md-4">
                                                <p class="lead">
                                                    $21.000</p>
                                            </div>
                                            <div class="col-xs-5 col-md-4">
                                                <a class="btn btn-danger" href="http://www.jquery2dotnet.com">Add to cart</a>
                                          	</div><!-- end col-xs-5 -->
                                        </div><!-- end row -->
                                    </div><!-- end group inner list -->
                                </div><!-- end caption -->
                            </div><!-- end thumbail -->
                            <div class="item  col-xs-12 col-md-4 col-lg-4 cp-produto">
                                <div class="thumbnail">
                                    <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
                                    <div class="caption">
                                        <h4 class="group inner list-group-item-heading">
                                            <a href="#produto" class="cp-link-pro">Product title</a></h4>
                                        <p class="group inner list-group-item-text">
                                            Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                                            sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                                        <div class="row">
                                            <div class="col-xs-5 col-md-4">
                                                <p class="lead">
                                                    $21.000</p>
                                            </div>
                                            <div class="col-xs-5 col-md-4">
                                                <a class="btn btn-danger" href="http://www.jquery2dotnet.com">Add to cart</a>
                                            </div><!-- end col-xs-5 -->
                                        </div><!-- end row -->
                                    </div><!-- end group inner list -->
                                </div><!-- end caption -->
                            </div><!-- end thumbail -->
                        </div>
                    </div>
            </div>
        </div>        
          	<!--<div class="well well-sm cp-como-funciona">
        	<div class="container">
	        	<div class="row">
                  	 <div class="col-md-4 col-xs-12 text-center">
	                  	<img src="img/device_icons.png" width="100%"/>
                        <p>1 - Donec sollicitudin molestie malesuada. Curabitur aliquet quam id dui posuere blandit. </p>
	                  </div> <!-- end col 
    	       		  <div class="col-md-4 col-xs-12 text-center">
                        <img src="img/moto-icon.png" width="100%"/>
                        <p>2 - Donec sollicitudin molestie malesuada. Curabitur aliquet quam id dui posuere blandit.</p>
        	          </div> <!-- end col 
            	      <div class="col-md-4 col-xs-12 text-center">
                  		<img src="img/entrega-icon.png" width="100%"/>
                        <p>3 - Donec sollicitudin molestie malesuada. Curabitur aliquet quam id dui posuere blandit.</p>
                	  </div> 	<!-- end col --
                  </div> 	<!-- end row --                                 	
	            </div>  <!-- end container -                                   	
            </div> <!-- well --
            -->
            <div class="container cp-formas-pagamentos">
                <div class="well well-sm">
                    <b>Formas de Pagamentos</b>
                </div>
                <div class="row">
                	<div class="col-md-6 col-xs-12"> <img src="img/pagseguro.png" /> <img src="img/paypal.png" /> <img src="img/visa.png" /> <img src="img/mastercard.png" /></div>
                </div>
            </div>
            <div class="container">    
              <div class="row">
                <div class="col-lg-12">
                  <div class="col-md-3 col-xs-6">
                    <ul class="list-unstyled">
                      <li>Páginas</li>
                      <li><a href="#">Como Funciona?</a></li>
                      <li><a href="#">Área de atendimento</a></li>
                      <li><a href="#">Fale conosco</a></li>                    
                      <li><a href="#">Ajuda</a></li>
                    </ul>
                  </div>
                  <div class="col-md-3 col-xs-6">
                    <ul class="list-unstyled">
                      <li>Outros Serviços</li>
                      <li><a href="#">Churrasqueiro Delivery</a></li>
                      <li><a href="#">Copo Cheio faz a festa</a></li>
                    </ul>
                  </div>                                    
                </div>
              </div>
              <hr>
              <div class="row">
                <div class="col-lg-12">
                  <div class="col-md-8 col-xs-12 text-center">
                    <a href="#">Termos do Serviço</a>    
                    <a href="#">Privacidade</a>    
                    <a href="#">Segurança</a>
                    <a href="#">Colaboradores</a>
                  </div>
                  <div class="col-md-4 col-xs-12 text-center">
                    <p class="muted">© 2014 Copo Cheio Beer Delivery</p>
                  </div>
                </div>
              </div>
            </div>
    </article>
    
    <!-- Modal -->
    <div class="modal fade" id="idadeCheck" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel">Termo de Uso</h4>
          </div>
          <div class="modal-body">
			<h3 class="text-center">Você tem mais de 18 anos?</h3>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" id="maiorque" data-dismiss="modal">Sim</button>
            <button type="button" class="btn btn-default" id="menorque">Não</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/detector.js"></script>
    <script src="js/jquery.cookie.js"></script>
    <script src="js/bootstrap.min.js"></script>    
    <script src="js/copocheio.js"></script>
  </body>
</html>